// 测试用的 iconfont，可生效
// @import './iconfont.css';

.test {
  // 可以通过 @apply 多个样式封装整体样式
  @apply mt-4 ml-4;

  padding-top: 4px;
  color: red;
}

:root,
page {
  // 修改按主题色
  // --wot-color-theme: #37c2bc;

  // 修改按钮背景色
  // --wot-button-primary-bg-color: green;
}

.ql-editor {
  ul {
    li {
      word-break: break-all;

      &::before {
        width: 20px;
        height: 20px;
        background-image: url("/src/static/icons/CarbonCircleOutline.svg");
        background-size: contain;
        /* 或 cover */
        background-repeat: no-repeat;
        content: "" !important;
        // content: url("/src/static/icons/CarbonCircleOutline.svg") !important;
        transform: translateY(3px);
        -webkit-transform: translateY(3px);
        -moz-transform: translateY(3px);
        -ms-transform: translateY(3px);
        -o-transform: translateY(3px);
      }
    }

    &[data-checked=true] {
      li {
        word-break: break-all;

        &::before {
          width: 20px;
          height: 20px;
          background-image: url("/src/static/icons/CarbonCheckmarkOutline.svg");
          background-size: contain;
          /*或cover*/
          background-repeat: no-repeat;
          content: "" !important;
          transform: translateY(3px);
          -webkit-transform: translateY(3px);
          -moz-transform: translateY(3px);
          -ms-transform: translateY(3px);
          -o-transform: translateY(3px);
        }
      }
    }
  }
}